<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
    {{ pageTitle }}
    </div>
    <div class="panel-body">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>手机</th>
            <th>激活</th>
            <th>角色</th>
            <th>注册时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="users.length > 0" v-for="(index, item) in users">
            <td style="width: 80px">
              <a>{{item.loginname}}</a>
            </td>
            <td>
              <a>{{item.email}}</a>
            </td>
            <td style="width: 80px">{{ item.mobile }}</td>
            <td style="width: 80px">{{ item.active }}</td>
            <td style="width: 80px">{{ item.role }}</td>
            <td style="width: 80px">{{ item.create_at }}</td>
            <td style="width: 80px">
              <div class="btn-group disabled">
                <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  操作 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu disabled">
                  <li><a v-on:click="onUpdateRole(index, 'A')">管理员</a></li>
                  <li><a v-on:click="onUpdateRole(index, 'S')">运营</a></li>
                  <li><a v-on:click="onUpdateRole(index, 'N')">普通用户</a></li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <p v-show="users.length < 1">无数据</p>
    </div>
  </div>
</div>
<script>
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';
  var vue = new Vue({
    el: '#app',
    data: {
      pageTitle: '用户列表',
      users: [],
      currentPage: 1,
      pages: 1,
      canLoadData: true,
      errorMsg: '',
      successMsg: ''
    },
    methods: {
      fetchUsers: function() {
        $.post(dataPrefix + '/user/list',
          {
            appId: appId,
            _csrf: $('#_csrf').val(),
            currentPage: vue.currentPage
          },
          function(result) {
            if (result.error) vue.errorMsg = result.error;
            else {
              result.data.forEach(function(item) {
                vue.users.push(item)
              })
            }
          }
        );
      },
      onUpdateRole: function(index, role) {
        $.post(dataPrefix + '/user/updateRole',
          {
            appId: appId,
            _csrf: $('#_csrf').val(),
            role: role,
            userId: vue.users[index]._id
          },
          function(result) {
            if (result.error) vue.errorMsg = result.error
            else {
              vue.successMsg = result.message;
              vue.users[index].role = role;
            }
          }
        )
      }
    }
  });

  var scrollButtom = new ScrollButtom();
  scrollButtom.init(function() {
    if (vue.currentPage < vue.pages && vue.canLoadData) {
      vue.canLoadData = false;
      vue.fetchUsers(vue.currentPage + 1);
    }
  });

  vue.fetchUsers();
</script>
